<template>
  <footer class="footer_guide border-1px">
    <span class="guide_item " :class="{on:'/msite' === $route.path}" @click="goTo('/msite')">
      <span class="item_icon">
        <i class="iconfont icon-waimai"></i>
      </span>
      <span>外卖</span>
    </span>
    <span class="guide_item" :class="{on:'/search' === $route.path}" @click="goTo('/search')">
      <span class="item_icon">
        <i class="iconfont icon-search"></i>
      </span>
      <span>搜索</span>
    </span>
    <span class="guide_item" :class="{on:'/order' === $route.path}" @click="goTo('/order')">
      <span class="item_icon">
        <i class="iconfont icon-dingdan"></i>
      </span>
      <span>订单</span>
    </span>
    <span class="guide_item" :class="{on:'/profile' === $route.path}" @click="goTo('/profile')">
      <span class="item_icon">
        <i class="iconfont icon-geren"></i>
      </span>
      <span>我的</span>
    </span>
  </footer>
</template>
<script>

export default {
  methods:{
    goTo(path){
      this.$router.replace(path)
    }
  }
}
</script>


<style lang="scss">
@import '../../common/scss/mixins';
  .footer_guide  {
    @include top-border-1px(#e4e4e4);
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 50px;
    display: flex;
    .guide_item {
      display: flex;
      flex: 1;
      text-align: center;
      flex-direction: column;
      align-items: center;
      margin: 5px;
      color: #999999;
      
      span {
        font-size: 12px;
        margin-top: 2px;
        margin-bottom: 2px;.iconfont {
          font-size: 22px;
        }
      }
    }
    .on {
        color: #02a774;
      }
  }
</style>
